<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酒店官网</title>
		<!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
		<link rel="stylesheet" type="text/css" href="css/hotel.css"/>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1499611_hjg5ohkw5t.css"/>
	</head>
	<body>
		<div id="app">
			<!-- 1.顶部的绿色条 -->
			<div class="topbar">
				<!-- 1.1 左边的时间 -->
				<div class="topbar-left">
					<i class="iconfont icon-shijian"></i>&nbsp;<span>周一至周日 8:00~18:00</span>
				</div>
				<!-- 1.2 右边的电话 -->
				<div class="topbar-right">
					<i class="iconfont icon-dianhua"></i>&nbsp;<span>13888887777</span>
				</div>
			</div>
			
			<!-- 2.顶部的导航条 -->
			<nav class="navbar clearfix">
				<div class="logo fl">
					<img src="img/logo.png" />
				</div>
				
				<div class="menu fr">
					<nav>
						<li class="nav-item">
							<a href="http://www.baidu.com">首页</a>
						</li>
						<li href="#" class="nav-item">
							<a href="http://www.baidu.com">新闻</a>
							<!-- <i class="angle"></i> -->
							<ul class="sub-list">
								<li class="sub-list-item"><a href="#">军事新闻</a></li>
								<li  class="sub-list-item"><a href="#">体育新闻</a></li>
								<li  class="sub-list-item"><a href="#">娱乐新闻</a></li>
								<li  class="sub-list-item"><a href="#">军事新闻</a></li>
							</ul>
						</li>
						
						<li class="nav-item">
							<a href="http://www.baidu.com">娱乐</a>
							<!-- <i class="angle"></i> -->
							<ul class="sub-list">
								<li class="sub-list-item"><a href="#">娱乐1新闻</a></li>
								<li  class="sub-list-item"><a href="#">娱乐2新闻</a></li>
								<li  class="sub-list-item"><a href="#">娱乐3新闻</a></li>
								<li  class="sub-list-item"><a href="#">娱乐4新闻</a></li>
							</ul>
						</li>
						<li class="nav-item">
							<a href="http://www.baidu.com">体育</a>
						</li>
						<li class="nav-item">
							<a href="http://www.baidu.com">热门</a>
						</li>
					</nav>
				</div>
			</nav>
			
			<!-- 3.滚动图 -->
			<div class="carousel">
				<!-- <img> -->
				<img src="img/slides/1.jpg" />
			</div>
			<!-- 4.内容区域 -->
			<div class="container">
				
				<!-- 4.1 卡片区域 -->
				<ul class="boxlist">
					<li class="boxlist-item">
						<div class="icon">
							<i class="iconfont icon-fangzi"> </i>
						</div>
						<div class="text">
							<h1>NEW PROJECTS</h1>
							<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</div>
					</li>
					<li class="boxlist-item">
						<div class="icon">
							<i class="iconfont icon-icon-technology-rocket"> </i>
						</div>
						<div class="text">
							<h1>NEW PROJECTS</h1>
							<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</div>
					</li>
					<li class="boxlist-item">
						<div class="icon">
							<i class="iconfont icon-jiangbei"> </i>
						</div>
						<div class="text">
							<h1>NEW PROJECTS</h1>
							<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</div>
					</li>
					<li class="boxlist-item">
						<div class="icon">
							<i class="iconfont icon-xingzhuang60kaobei2"> </i>
						</div>
						<div class="text">
							<h1>NEW PROJECTS</h1>
							<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
						</div>
					</li>
				</ul>
				
				<!-- 4.2 地址区域 -->
				<div class="address">
					<h2><span>嘉兴东臣</span>科技商务酒店</h2>
					<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦</p>
				</div>
				
				<!-- 4.3 图文展示区 -->
				<ul class="img-list">
					<li class="img-list-item">
						<img src="img/img1.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item">
						<img src="img/img2.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item">
						<img src="img/img3.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item">
						<img src="img/img4.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
				</ul>
				
				<!-- 4.4 地址区域2 -->
				<div class="address">
					<h2><span>嘉兴东臣</span>科技商务酒店</h2>
					<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦，50倍数字变焦 / 5260mAh大电量 / 标配30W疾速快充 / 小米首款超薄屏下指纹 / 德国莱茵低蓝光认证 / 多功能NFC / 红外万能遥控 / 1216 超线性扬声器</p>
				</div>
				
				<!-- 4.5 图文展示区2 -->
				<ul class="img-list ">
					<li class="img-list-item big">
						<img src="img/img1.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item big">
						<img src="img/img2.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item big">
						<img src="img/img3.jpg" />
						<h2>超级豪华海景房</h2> 
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item big">
						<img src="img/img4.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item big">
						<img src="img/img3.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
					<li class="img-list-item big">
						<img src="img/img4.jpg" />
						<h2>超级豪华海景房</h2>
						<p>1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头</p>
					</li>
				</ul>
				<div class="address">
					<h2><span>嘉兴东臣</span>科技商务酒店</h2>
					<p>1亿像素超清主摄 / 后置全场景五摄像头 / 双闪光双柔光四闪光灯 / 3200万像素超清前置相机 / 10倍混合光学变焦，50倍数字变焦 / 5260mAh大电量 / 标配30W疾速快充 / 小米首款超薄屏下指纹 / 德国莱茵低蓝光认证 / 多功能NFC / 红外万能遥控 / 1216 超线性扬声器</p>
				</div>
				<div class="dibubox">
					<p class="p1">1亿像素超清主摄,后置全场景五摄像头1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头1亿像素超清主摄,后置全场景五摄像头,后置全场景五摄像头1亿像素超清主摄,
	后置全场景五摄像头1亿像</p>
					<div class="p2">	
					<p class="p2-1"><img class="next" src="img/next.png" /><span class="p2-2">1亿像素超清主摄,后置全场景五摄像头</span></p>
					</div>
					<div class="p2">
					<p class="p2-1"><img class="next" src="img/next.png" /><span class="p2-2">1亿像素超清主摄,后置全场景五摄像头</span></p>
					</div>
					<div class="p2">
					<p class="p2-1"><img class="next" src="img/next.png" /><span class="p2-2">1亿像素超清主摄,后置全场景五摄像头</span></p>
					</div>
					<div class="p2">
					<p class="p2-1"><img class="next" src="img/next.png" /><span class="p2-2">1亿像素超清主摄,后置全场景五摄像头</span></p>
					</div>
					<div class="btn">
						我知道了
					</div>
					<div class="about">
					<img src="img/about.jpg" />
					</div>
				</div>
			</div>
		</div>
		<!-- 底部版权 -->
		<div class="banquan">
			<nav>
				<li class="banquan1"><strong>Our Contact</strong>
					<ul>
						<li class="caidan">csdfsefoi</li>
						<li class="caidan">cfesfsdfsoife</li>
						<li class="caidan">csdfsoeaefi</li>
						<li class="caidan">csdfearfsoi</li>
						<li class="caidan">cearfsdfsoi</li>
						<li class="caidan">cseaRFdfsoi</li>
					</ul>
				</li>
				<li class="banquan1"><strong>Our Contact</strong>
					<ul>
						<li class="caidan">csdfFhrtAFsoi</li>
						<li class="caidan">cEAFEAfesfesfsefsdfsoi</li>
						<li class="caidan">csdfsfseFAEFoi</li>
						<li class="caidan">cfsefgsFAEFfesfdfsoi</li>
						<li class="caidan">csdFfesfEAFfsoi</li>
						<li class="caidan">csdfsfoFAEFi</li>
					</ul>
				</li>
				<li class="banquan1"><strong>Our Contact</strong>
					<ul>
						<li class="caidan">csdrfaerfaefaeferfadfAoi</li>
						<li class="caidan">csdfrgasreefafgaeferfadfAoii</li>
						<li class="caidan">rfareaerfefdaraerfadfAoiarfea</li>
						<li class="caidan">cafefaererafeaerfadfAoisdfsoi</li>
						<li class="caidan">csdfsfaerfefaefdadfAoiroi</li>
						<li class="caidan">csafefsdrfaefeoifffffffdfsoi</li>
					</ul>
				</li>
				<li class="banquan1"><strong>Our Contact</strong>
					<ul>
						<li class="caidan">csdrfaerfaefaefdrfrrfadfAoi</li>
						<li class="caidan">csdfrgasreefafgaefaeffdrferfadfAoii</li>
						<li class="caidan">rfareaerfefdararfadfAoiarfea</li>
						<li class="caidan">cafefaererafeaerfadfAoisdfsoi</li>
						<li class="caidan">csdfsfaerfefaefdadfAoiroi</li>
						<li class="caidan">csafefsdrfaeferfafsefsfdfAoifffffffdfsoi</li>
					</ul>
				</li>
			</nav>
			<div class="banquanma">
				<div class="text1">	
				浙江省嘉兴市昌盛南路658号东臣信息科技商务酒店
				</div>
				<div class="iconku">
					<i class="iconfont icon-icon-test4"></i>
					<i class="iconfont icon-icon-test3"></i>
					<i class="iconfont icon-icon-test2"></i>
					<i class="iconfont icon-icon-test1"></i>
					<i class="iconfont icon-icon-test"></i>
				</div>
			</div>
			
		</div>
			
</html>
